<template>
	<div class="query-source-timeline-container" translate="no">
		<h2>{{ fromLine.evidenceNo }}/{{ fromLine.evidenceName }}</h2>
		<ul id="timeline">
			<li class="work" v-for="(r, i) in fromLine.data" :key="i">
				<input class="radio" :id="'work' + i" name="works" type="radio" />
				<div class="relative">
					<label for="work5">{{ r.title }}</label>
					<span class="date">{{ r.time?formatDate(new Date(r.time), 'YYYY-mm-dd HH:MM:SS'):"" }}</span>
					<span class="circle"></span>
				</div>
				<div class="content" style="width: 260px" v-if="r.title == '案件信息'">
					<span>主办单位：{{ r.v1 }}</span>
					<span>主办人：{{ r.v2 }}</span>
					<span>关联编号：{{ r.v3 }}</span>
					<span>案件编号：{{ r.v4 }}</span>
				</div>
				<div class="content" v-else-if="r.title == '登记'">
					<span>登记单位：{{ r.v1 }}</span>
					<span>登记人：{{ r.v2 }}</span>
				</div>
				<div class="content" v-else-if="r.title == '入库'">
					<span>存放位置：{{ r.v1 }}</span>
					<span>移交人：{{ r.v2 }}</span>
					<span>保管人：{{ r.v3 }}</span>
				</div>
				<div class="content" v-else-if="r.title == '位置转移'">
					<span>当前位置：{{ r.v1 }}</span>
					<span>转以后位置：{{ r.v2 }}</span>
					<span>操作人：{{ r.v3 }}</span>
					<span>原因：{{ r.v4 }}</span>
				</div>
				<div class="content" v-else>
					<span>接收单位：{{ r.v1 }}</span>
					<span>接收人：{{ r.v2 }}</span>
					<span>移交人：{{ r.v3 }}</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useStore } from '/@/store/index';
import { querySourceByEveidenceNo } from '/@/api/query/index';
import { formatDate } from '/@/utils/formatTime';

export default {
	name: 'querySourcetimeline',
	components: {},
	props: {
		sourceTimeLine: Object,
	},
	setup(pp) {
		const store = useStore();
		const state = reactive({ fromLine: {} });

		const loadTimeLine = (no, organId) => {
			querySourceByEveidenceNo(no, organId).then((res: any) => {
				if (res.success) {
					state.fromLine = res.data;
				}
			});
		};

		return {
			loadTimeLine,
			formatDate,
			...toRefs(state),
		};
	},
};
</script>
<style lang="scss" scoped>
.query-source-timeline-container {
	padding: 0 2px 1% 2%;
	font-size: 100%;
	font-family: 'Noto Sans', sans-serif;
	color: #eee9dc;
	background: #556b2f;
	width: calc(100% - 10px);
	overflow: auto;
}

h2 {
	margin: 0em 0 0 0;
	padding: 10px 0 0 0;
	font-size: 18px;
	letter-spacing: 0px;
	text-transform: uppercase;
}

/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline {
	list-style: none;
	margin: 70px 0 0;
	padding: 0;
	border-top: 8px solid #eee9dc;
	display: table;
	border-spacing: 30px 0;
}
#timeline li {
	display: table-cell;
}
#timeline li .relative {
	position: relative;
}
#timeline p {
	margin: 0 0 15px;
}

.date {
	text-align: center;
	top: -55px;
	left: 0;
	right: 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	position: absolute;
}

.circle {
	margin: 0 auto;
	top: -14px;
	left: 0;
	right: 0;
	width: 22px;
	height: 22px;
	background: #f98262;
	border: 5px solid #eee9dc;
	border-radius: 50%;
	display: block;
	position: absolute;
}

.content {
	width: 200px;
	margin-top: 28px;
	vertical-align: top;
	padding: 40px 15px 15px;
	transition: width 0.4s linear, max-height 0.4s linear;
	border-width: 2px;
	border-style: solid;
	border-radius: 0.5em;
	position: relative;
	min-height: 180px;
}

.content span {
	display: block;
	line-height: 30px;
}
.content:before,
.content:after {
	content: '';
	width: 0;
	height: 0;
	border: solid transparent;
	position: absolute;
	pointer-events: none;
	bottom: 100%;
}
.content:before {
	border-bottom-color: inherit;
	border-width: 15px;
	left: 50%;
	margin-left: -15px;
}
.content:after {
	border-bottom-color: #556b2f;
	border-width: 12px;
	left: 50%;
	margin-left: -12px;
}
.content p {
	max-height: 0;
	color: transparent;
	text-align: justify;
	word-break: break-word;
	hyphens: auto;
	overflow: hidden;
}

label {
	font-size: 16px;
	font-weight: bold;
	position: absolute;
	z-index: 100;
	cursor: pointer;
	width: 100px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	top: 40px;
	left: 15px;
}

.radio {
	display: none;
}

.radio:checked + .relative label {
	cursor: auto;
	width: 400px;
	transition: width 0.3s linear 0.2s;
}
.radio:checked + .relative .circle {
	background: #f98262;
}
.radio:checked ~ .content {
	max-height: 180px;
	border-color: #eee9dc;
	width: 260px;
}
.radio:checked ~ .content p {
	max-height: 200px;
	color: #eee9dc;
	transition: color 0.3s linear 0.3s;
}
</style>
